<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Ashion Template">
    <meta name="keywords" content="Ashion, unica, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Base | 购物</title>

    <!-- Google Font -->
<!--    <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">-->
<!--    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap"-->
<!--    rel="stylesheet">-->

    <!-- Css Styles -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/elegant-icons.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/slicknav.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/style-1.css}" type="text/css">
</head>

<body>
    <!-- Page Preloder -->
    <div id="preloder" th:replace="~{comm/common::preloader}"/>

    <!-- Offcanvas Menu Begin -->
    <div class="offcanvas-menu-overlay"></div>
    <div class="offcanvas-menu-wrapper" th:replace="~{comm/common::offcanvas}"/>
    <!-- Offcanvas Menu End -->

    <!-- Header Section Begin -->
    <header class="header" th:replace="~{comm/common::header}"/>
    <!-- Header Section End -->

    <!-- Breadcrumb Begin -->
    <div class="breadcrumb-option" th:replace="~{comm/common::breadcrumb}"/>
    <!-- Breadcrumb End -->

    <!-- Shop Section Begin -->
    <section class="shop spad">
        <div class="container">
            <div class="row">
<!--                <form class="row">-->
<!--                    <span class="icon_search search-switch"></span>-->
<!--                    <input class="form-control mr-sm-2 bg-transparent border-0 pl-4 text-muted" type="search" placeholder="Type something..." aria-label="Search">-->
<!--                </form>-->
                <div class="col-lg-3 col-md-3">
                    <div class="shop__sidebar">
                        <div class="sidebar__categories">
                            <div class="section-title">
                                <h4>目录</h4><br/>
                            </div>
                            <div class="section-intro" style="display:inline-flex;">
                                <input class="mr-sm-2 bg-transparent border-primary pl-4 text-muted" type="search"
                                       placeholder="搜索商品.." aria-label="Search" style="width: 180px">
                                <button class="icon_search search-switch" style="border-style: groove"></button>
                            </div>
                            <br/>
                            <div class="categories__accordion">
                                <div class="accordion" id="accordionExample">
                                    <div class="card" th:if="${catalog!=null}" th:each="cataEntry,cur:${catalog}">
                                        <div class="card-heading " th:classappend="${cur.index} == 0?'active':'' ">
                                            <a data-toggle="collapse" th:data-target="'#'+${cataEntry.key.typeName}" th:text="${cataEntry.key.typeName}">Women</a>
                                        </div>
                                        <div th:id="${cataEntry.key.typeName}" class="collapse " th:classappend="${cur.index} >= 0?'show':''" data-parent="#accordionExample">
                                            <div class="card-body">
                                                <ul >
                                                    <th:block th:if="${cataEntry!=null}" th:each="son:${cataEntry.value}">
                                                    <li><a th:href="@{/shop/items/catalog/{pageNum}(pageNum=${page.current},typeId=${son.typeId})}" th:text="${son.typeName}">Coats</a></li>
                                                    </th:block>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sidebar__filter">
                            <div class="section-title">
                                <h4>Shop by price</h4>
                            </div>
                            <div class="filter-range-wrap">
                                <div class="price-range ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
                                th:data-min="${priceMin}" th:data-max="${priceMax}"></div>
                                <div class="range-slider">
                                    <div class="price-input">
                                        <p>价格</p>
                                        <input type="text" id="minamount" style="text-overflow: ellipsis;">&nbsp;
                                        <input type="text" id="maxamount" style="text-overflow: ellipsis;">
                                    </div>
                                </div>
                            </div>
                            <a href="#" id="price-filter">Filter</a>
                        </div>
                        <div class="sidebar__sizes">
                            <div class="section-title">
                                <h4>Shop by size</h4>
                            </div>
                            <div class="size__list">
                                <label for="xxs">
                                    xxs
                                    <input type="checkbox" id="xxs">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="xs">
                                    xs
                                    <input type="checkbox" id="xs">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="xss">
                                    xs-s
                                    <input type="checkbox" id="xss">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="s">
                                    s
                                    <input type="checkbox" id="s">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="m">
                                    m
                                    <input type="checkbox" id="m">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="ml">
                                    m-l
                                    <input type="checkbox" id="ml">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="l">
                                    l
                                    <input type="checkbox" id="l">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="xl">
                                    xl
                                    <input type="checkbox" id="xl">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="sidebar__color">
                            <div class="section-title">
                                <h4>Shop by size</h4>
                            </div>
                            <div class="size__list color__list">
                                <label for="black">
                                    Blacks
                                    <input type="checkbox" id="black">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="whites">
                                    Whites
                                    <input type="checkbox" id="whites">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="reds">
                                    Reds
                                    <input type="checkbox" id="reds">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="greys">
                                    Greys
                                    <input type="checkbox" id="greys">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="blues">
                                    Blues
                                    <input type="checkbox" id="blues">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="beige">
                                    Beige Tones
                                    <input type="checkbox" id="beige">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="greens">
                                    Greens
                                    <input type="checkbox" id="greens">
                                    <span class="checkmark"></span>
                                </label>
                                <label for="yellows">
                                    Yellows
                                    <input type="checkbox" id="yellows">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9">
                    <div class="row">
                        <th:block th:if="${items?.isEmpty()}">
                        <h2 style="text-align: center;margin-top: 50%;margin-left: 50%">没有商品...</h2>
                        </th:block>
                        <!--遍历items-->
                        <th:block th:if="${items!=null}">
                        <div class="col-lg-4 col-md-6" th:each="item:${items}">
                            <div class="product__item">
<!--                                <div class="product__item__pic set-bg" data-setbg="img/shop/shop-1.jpg">-->
                                    <div class="product__item__pic set-bg" th:data-setbg="${item.image}">
                                    <!-- new,stockout,stockblue,sale-->
                                    <div class="label new" th:text="${item.status==1?'NEW':'SOLD OUT'}">New</div>
<!--                                    <div class="label stockout stockblue">Out Of Stock</div>-->
<!--                                        <div class="label">Sale</div>-->
                                    <ul class="product__hover">
<!--                                        <li><a href="img/shop/shop-1.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
                                        <li><a th:href="${item.image}" class="image-popup"><span class="arrow_expand"></span></a></li>
<!--                                        <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
                                        <li><a href="#"><span class="icon_bag_alt" th:id="${item.id}"></span></a></li>
                                    </ul>
                                </div>
                                <div class="product__item__text">
<!--                                    <h6><a href="#">Furry hooded parka</a></h6>-->
                                    <!--未做商品详情URL -->
                                    <h6><a th:href="@{|/shop/detail/${item.id}|}" th:text="${item.name}">Furry hooded parka</a></h6>
                                    <div class="rating">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <div class="product__price" th:text="${'¥ '+item.priceSell}">$ 59.0</div>
                                </div>
                            </div>
                        </div>
                        </th:block>

                        <div class="col-lg-12 text-center">
                            <div class="pagination__option">
                                <th:block th:if="${page != null}">
                                    <input type="hidden" th:value="${page.current}" id="cur-page">
                                    <th:block th:if="${!#strings.containsIgnoreCase(#httpServletRequest.requestURI,'page')}">
                                        <a th:if="${page.current > 1}" th:href="@{/shop/items/catalog/{pageNum}(pageNum=${page.current -1},typeId=${typeId})}"><i class="fa fa-angle-left"></i></a>
                                        <a th:if="${page.current < ((page.total/page.size)+1)}" th:href="@{/shop/items/catalog/{pageNum}(pageNum=${page.current +1},typeId=${typeId})}"><i class="fa fa-angle-right"></i></a>
                                    </th:block>
                                    <th:block th:if="${#strings.containsIgnoreCase(#httpServletRequest.requestURI,'page')}">
                                        <a th:if="${page.current > 1}" th:href="@{(${page.current -1})}"><i class="fa fa-angle-left"></i></a>
                                        <a th:if="${page.current < ((page.total/page.size)+1)}" th:href="@{(${page.current +1})}"><i class="fa fa-angle-right"></i></a>
                                    </th:block>
                                </th:block>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Shop Section End -->

    <!-- Instagram Begin -->
    <div class="instagram" th:replace="~{comm/common::ins}"/>
    <!-- Instagram End -->

    <!-- Footer Section Begin -->
    <footer class="footer" th:replace="~{comm/common::footer}"/>
    <!-- Footer Section End -->

    <!-- Search Begin -->
    <div class="search-model" th:replace="~{comm/common::search}"/>
    <!-- Search End -->

    <!-- Js Plugins -->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/js/jquery-ui.min.js}"></script>
    <script th:src="@{/js/mixitup.min.js}"></script>
    <script th:src="@{/js/jquery.countdown.min.js}"></script>
    <script th:src="@{/js/jquery.slicknav.js}"></script>
    <script th:src="@{/js/owl.carousel.min.js}"></script>
    <script th:src="@{/js/jquery.nicescroll.min.js}"></script>
    <script th:src="@{/js/main-1.js}"></script>
    <script>

        $(document).ready(function() {
            let res = 0
            $.ajax({
                type:'get',
                url:"/cart/checkAmount",
                async:false,
                success:function(result){
                    console.log(result)
                    res = result
                    $('#cartNum').text(res)
                }});
        })

        $(".icon_bag_alt").click(function(){
            const itemId = $(this).attr("id")
            // console.log("itemId")
            console.log(itemId)
            const url = "/shop/cart/add/"+itemId
            $.post(url,function(data,status){
                // alert("数据: " + JSON.stringify(data) + "\n状态: " + status);
                console.log("addCart数据: " + JSON.stringify(data) + "\n状态: " + status);
                if (status == 'success') {
                    alert('商品成功添加到购物车')
                }else {
                    alert('添加失败..')
                }
                //update status of cart
                let ret = 0
                $.ajax({
                    type:'get',
                    url:"/cart/checkAmount",
                    async:false,
                    success:function(result){
                        console.log(result)
                        ret = result
                        $('#cartNum').text(ret)
                    }});
            });
        });

        $("#price-filter").click(function () {
            const pageNum = $('#cur-page').val()
            const max = $('#maxamount').val()
            const min = $('#minamount').val()
            console.log(pageNum)
            console.log(min)
            console.log(max)
            window.location.href="/shop/items/price/"+pageNum+"?min="+min+"&max="+max
            // $.get("/shop/items/price/"+pageNum+"?min="+min+"&max="+max,function(data,status){
            //     // alert("数据: " + JSON.stringify(data) + "\n状态: " + status);
            //     console.log("filter数据: " + JSON.stringify(data) + "\n状态: " + status);
            //     alert(status)
            // });
        })
    </script>
</body>

</html>
